<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师后台-不学也通-班级添加</title>
    <link rel="shortcut icon" href="" type="image/x-icon">
    <style>
        .container {
            min-height: 100vh;
        }

        .container .nav {
            height: 100%;
            background-color: #fff;
        }

        .link-secondary {
            text-decoration: none;
        }

        .link-secondary:hover {
            color: #0d6efd !important;
        }
        #upload-img{
            width: 180px;
            display: none;
        }
    </style>
</head>

<body>
    <!-- container是bootstrap的居中窄的显示方案 -->
    <div class="container bg-body">
        <div class="row">
            <div class="col-md-2 leftmenu" id="leftmenu">

            </div>
            <div class="col-md-9 kc ms-3">
                <div class="row mt-3 pd-3 border-bottom border-secondary">
                    <div class="col-md-2">添加班级</div>
                    <div class="col-md-1 offset-md-8">
                        <a class="nav-link link-success" href="javascript:history.go(-1)">返回</a>
                    </div>
                </div>
                <div class="row mt-3">
                    <form>
                        <div class="mb-3 row">
                            <label for="class_code" class="col-sm-2 col-form-label">班级编号:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="class_code">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="class_name" class="col-sm-2 col-form-label">班级名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="class_name">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="grade_code" class="col-sm-2 col-form-label">年级:</label>
                            <div class="col-sm-10">
                                <select class="form-select" aria-label="Default select " id="grade_code">
                                    <option selected>--&nbsp;&nbsp;请选择年级&nbsp;&nbsp;--</option>
                                    <option value="2021">2021级</option>
                                    <option value="2022">2022级</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <div class="row">
                                <img src="" id="upload-img">
                            </div>
                            <label for="class_logo" class="col-sm-2 col-form-label">班级logo:</label>
                            <div class="col-sm-10">
                                <input type="file" class="form-control" id="class_logo" multiple onchange="upload(event)">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="class_number" class="col-sm-2 col-form-label">班级人数:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="class_number">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-outline-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(document).ready(function () {
            $(".btn-outline-primary").click(function () {
                let class_code = $("#class_code").val()
                let class_name = $("#class_name").val()
                // let class_logo = $("#class_logo").val() 废弃
                let class_number = $("#class_number").val()
                let grade_code = $("#grade_code").val()
                // 获取图片地址
                let class_logo= $("#upload-img").attr("src");// 获取img标签src属性值

                $.post("https://unicloud.codecore.cn/ms/classCreate", {
                    class_code: class_code,
                    class_name: class_name,
                    class_logo: class_logo,
                    class_number: class_number,
                    grade_code: grade_code,
                    school_code: 50709,
                    department_code: 200,
                    majors_code: 3
                }, function (params) {
                    if (params.errCode == 0) {
                        location.href = " ./class.html"
                    } else {
                        alert("添加失败")
                    }
                })
            })
        })

        // 实现上传文本信息前上传图片
        function upload(e) {
            let file = e.target.files[0];
            // file内是文件信息 不是图片 进一步处理 变为图片(当然也可以上传)
            let base64file = getBase64(file)
            // 获取图片的base64的文件信息
            base64file.then(res=>{
                // 重要 将图片上传到后端服务器
                const fd = new FormData();// 必须构造一下传递数据对象类型
                fd.append("file",res)
                $.ajax({
                    type:"POST",
                    url:"https://unicloud.codecore.cn/ms/upload",
                    data:fd,
                    processData:false,
                    contentType:false,
                    beforeSend:function(xhr){
                        xhr.overrideMimeType("contentType=multipart/form-data");// 头部信息指明上传文件
                    },
                    dataType:"JSON" 
                }).done(response=>{
                    // 图片中显示为上传好的网址
                    // 将base64放到图片src上显示出来
                setTimeout(() => {
                    $("#upload-img").show();
                    $("#upload-img").attr("src",response.url)
                },1500)    
                });
            })
        }
        // 将file文件上传转化为base64进行显示
        function getBase64(file) {
            return new Promise((resolve, reject) => {
                ///FileReader类就是专门用来读文件的
                const reader = new FileReader()
                //开始读文件
                //readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串，
                reader.readAsDataURL(file)
                // 成功和失败返回对应的信息，reader.result一个base64，可以直接使用
                reader.onload = () => resolve(reader.result)
                // 失败返回失败的信息
                reader.onerror = error => reject(error)
            })
        }


    </script>
</body>

</html>